{% extends "base.html" %}

{% block title %}公告中心 - 图书管理系统{% endblock %}

{% block content %}
<style>
    .announcement-card {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        border-radius: 10px;
        overflow: hidden;
    }
    .announcement-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    .announcement-card .card-header {
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .list-group-item {
        border: none;
        padding: 0.75rem 1.25rem;
    }
    .list-group-item:before {
        content: "•";
        color: #3b82f6;
        margin-right: 0.5rem;
    }
    @media (max-width: 768px) {
        .col-md-4 {
            min-width: 100%;
        }
    }
</style>

<div class="container mt-5">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5">
        <h2 class="text-primary fw-bold mb-3 mb-md-0">
            <i class="fas fa-bullhorn me-2"></i>图书管理系统的公告中心
        </h2>
        <a href="{{ url_for('main.index') }}" class="btn btn-outline-primary px-4">
            <i class="fas fa-arrow-left me-1"></i>返回首页
        </a>
    </div>

    <div class="row g-5">
        <!-- 公告1 -->
        <div class="col-md-4">
            <div class="card h-100 announcement-card shadow-sm">
                <div class="card-header bg-gradient-to-r from-blue-500 to-cyan-400 text-white py-3">
                    <h5 class="mb-0">图书借阅规则</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex align-items-center">
                            <i class="fas fa-book fa-fw me-2 text-blue-500"></i>
                            借阅期限与续借规则
                        </li>
                        <li class="list-group-item d-flex align-items-center">
                            <i class="fas fa-users fa-fw me-2 text-blue-500"></i>
                            读者权限说明
                        </li>
                        <li class="list-group-item d-flex align-items-center">
                            <i class="fas fa-exclamation-triangle fa-fw me-2 text-blue-500"></i>
                            逾期处理办法
                        </li>
                    </ul>
                </div>
                <div class="card-footer bg-white border-0">
                    <a href="{{ url_for('annotate.detail', announcement_id=1) }}" class="btn btn-blue w-100 py-2">
                        查看详情 <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- 公告2 -->
        <div class="col-md-4">
            <div class="card h-100 announcement-card shadow-sm">
                <div class="card-header bg-gradient-to-r from-green-500 to-teal-400 text-white py-3">
                    <h5 class="mb-0">新书推荐</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex align-items-center">
                            <i class="fas fa-star fa-fw me-2 text-green-500"></i>
                            本月热门图书
                        </li>
                        <li class="list-group-item d-flex align-items-center">
                            <i class="fas fa-trophy fa-fw me-2 text-green-500"></i>
                            获奖作品推荐
                        </li>
                        <li class="list-group-item d-flex align-items-center">
                            <i class="fas fa-calendar-plus fa-fw me-2 text-green-500"></i>
                            新到馆藏图书
                        </li>
                    </ul>
                </div>
                <div class="card-footer bg-white border-0">
                    <a href="{{ url_for('annotate.detail', announcement_id=2) }}" class="btn btn-green w-100 py-2">
                        查看详情 <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- 公告3 -->
        <div class="col-md-4">
            <div class="card h-100 announcement-card shadow-sm">
                <div class="card-header bg-gradient-to-r from-yellow-500 to-amber-400 text-dark py-3">
                    <h5 class="mb-0">服务指南</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex align-items-center">
                            <i class="fas fa-clock fa-fw me-2 text-yellow-500"></i>
                            开馆时间安排
                        </li>
                        <li class="list-group-item d-flex align-items-center">
                            <i class="fas fa-map-marker-alt fa-fw me-2 text-yellow-500"></i>
                            馆内布局指引
                        </li>
                        <li class="list-group-item d-flex align-items-center">
                            <i class="fas fa-question-circle fa-fw me-2 text-yellow-500"></i>
                            常见问题解答
                        </li>
                    </ul>
                </div>
                <div class="card-footer bg-white border-0">
                    <a href="{{ url_for('annotate.detail', announcement_id=3) }}" class="btn btn-yellow w-100 py-2">
                        查看详情 <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 自定义CSS -->
<style>
    :root {
        --blue: #3b82f6;
        --green: #10b981;
        --yellow: #f59e0b;
    }

    .bg-gradient-to-r {
        background-image: linear-gradient(to right, var(--tw-gradient-stops));
    }

    .btn-blue {
        background-color: var(--blue);
        border-color: var(--blue);
    }
    .btn-blue:hover {
        background-color: #2563eb;
        border-color: #2563eb;
    }

    .btn-green {
        background-color: var(--green);
        border-color: var(--green);
    }
    .btn-green:hover {
        background-color: #059669;
        border-color: #059669;
    }

    .btn-yellow {
        background-color: var(--yellow);
        border-color: var(--yellow);
    }
    .btn-yellow:hover {
        background-color: #d97706;
        border-color: #d97706;
    }
</style>
{% endblock %}
